<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.active{
				color: blue;
				text-decoration: underline;
				cursor: pointer;
			}
		</style>
		<script src="js/jquery-3.6.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("button").click(function(){
					var tr = $("<tr></tr>");
					tr.attr("align","center");
					for(var i=0;i<4;i++){
						var td = $("<td></td>");
						if(i==3){
							var span = $("<span>删除</span>");
							span.addClass("active");
							span.appendTo(td);
							span.click(function(){
								tr.remove();
							})
						}else{
							td.html($("input").eq(i).val());
						}
						td.appendTo(tr);
					}
					tr.appendTo($("table"));
				})
			})
		</script>
	</head>
	<body>
		<!--<label for="user">ID:</label>
		<input id="user" type="text" />-->
		<label>
			ID:<input type="text" />
		</label>
		<br />
		<label>
			姓名:<input type="text" />
		</label>
		<br />
		<label>
			电话:<input type="text" />
		</label>
		<br />
		<button>保存</button>
		<table width="500" border="1">
			<tr align="center">
				<th>ID</th>
				<th>Name</th>
				<th>tel</th>
				<th>操作</th>
			</tr>
		</table>
	</body>
</html>
